<template>
	<div>
		<div class="menberConTitle flex" style="justify-content: space-between;">
			<div class="tableTitle">社会职务</div>
			<div>
				<el-button type="primary" size="mini" class="titleBtn" round @click="toAddPage('/entrance/teammanagement/addsociety')">新增</el-button>
			</div>
		</div>
		<div class="tableDataBox flex">
			<el-table :data="pageData" style="width: 100%">
				<el-table-column prop="getDate" label="获得年月"></el-table-column>
				<el-table-column prop="organization" label="社会组织"></el-table-column>
				<el-table-column prop="duty" label="组织职务"></el-table-column>
				<el-table-column prop="address" label="证书">
					<template slot-scope="scope">
						<el-image v-if="scope.row.image" class="tableImages" title="点击查看大图" :preview-src-list="[scope.row.image]"
						 :src="scope.row.image" fit="cover"></el-image>
						<el-upload v-else class="upload-demo" action="" :http-request="uploadFile" :show-file-list="false">
							<el-button type="text" @click="getIndex(scope.$index)">上传图片</el-button>
						</el-upload>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isOpen == 1" @click="setIsOpen(scope.row)">不公开</el-button>
						<el-button type="text" v-else @click="setIsOpen(scope.row)">公开</el-button>
						<el-button type="text" @click="toAddPage(`/entrance/teammanagement/addsociety?index=${scope.$index}`)">修改</el-button>
						<el-button type="text" style="color: #F42929;" @click="deleteRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import add from '../utils/index.js'
	export default {
		data() {
			return {
				pageData: add.data.socialPosition,
				handlerTime: '',
				uploadFileIndex: ''
			}
		},
		watch: {
			handlerTime(newValue) {
				this.pageData = add.data.socialPosition
			}
		},
		methods: {
			toAddPage(url) {
				// 跳转到新增页面
				this.$router.push(url)
			},
			// 教育经历
			setIsOpen(row) {
				// 是否公开
				if(row.isOpen == '1'){
					row.isOpen = '0'
				} else {
					row.isOpen = '1'
				}
				this.setHandlerTime()
			},
			deleteRow(index) {
				add.social.remove(index)
			},
			getIndex(index) {
				// 获取上传图片的数组下标
				this.uploadFileIndex = index
			},
			uploadFile(file) {
				// 上传文件
				let File = file.file
				add.uploadFile(File, (data) => {
					add.social.getSelf(this.uploadFileIndex, (obj) => {
						obj.image = data
					})
					this.$message.success('上传成功')
					this.setHandlerTime()
				})
			},
			setHandlerTime() {
				this.handlerTime = new Date().getTime()
			}
		}
	}
</script>

<style scoped="scoped">
	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		font-size: 16px;
		color: #333333;
		align-items: center;
		/* margin-bottom: 20px; */
		margin-top: 30px;
	}
	.tableImages {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}
</style>
